<template>
    <a-modal :visible="state.visible" title="新增角色" @cancel="handleCancel" @ok="handleOk" :width="820">
       <a-form ref="formRef" :model="state.formData" :labelCol="{style:'width:100px'}">
           <a-form-item label="角色名称" name="name" :rules="[{required:true,message:'必填'}]">
               <a-input style="width: 400px;" v-model:value="state.formData.name"></a-input>
           </a-form-item>
           <a-form-item label="角色值" name="value" :rules="[{required:true,message:'必填'}]">
               <a-input style="width: 400px;" v-model:value="state.formData.value"></a-input>
           </a-form-item>
           <a-form-item label="绑定权限" name="permissons">
               <a-select style="width: 670px;" mode="multiple" v-model:value="state.formData.permissions">
                  <a-select-option v-for="(item,index) in state.permissions" :value="item.id" :key="index">{{item.name}}</a-select-option>
               </a-select>
           </a-form-item>
           <a-form-item label="角色描述" name="description">
               <a-input style="width: 400px;" v-model:value="state.formData.description"></a-input>
           </a-form-item>
       </a-form>
     </a-modal>  
</template>
<script lang="ts" setup>
import { reactive,ref,nextTick,onMounted } from "vue";
import _ from "lodash";
import { PermissionService, RoleService } from "@/service";
import { PageResult, ResponseVo } from "@/type";

const props = withDefaults(defineProps<{
   currentData?:any;
}>(),{
   currentData:():any=>({})
})


const state = reactive<{
   visible: boolean;
   formData:any,
   permissions:{name:string,uri:string,description:string,id:number}[]
}>({
   visible:true,
   formData:{},
   permissions:[]
})
const formRef = ref();

const emit = defineEmits<{
   (e:"ok"):void,
   (e:"cancel"):void
}>()

onMounted(()=>{
   state.formData = {...props.currentData};
   if(!props.currentData?.permissions?.length){
      state.formData.permissions =[]
   }else{
      state.formData.permissions = props.currentData?.permissions.map((item:any)=>item.permissionId)
   }
   handlePermissions();
})

const handlePermissions = async()=>{
   const res:ResponseVo<PageResult<any>>= await PermissionService.pagePermission({pageNum:1,pageSize:999});
    if(res.code===0){
        state.permissions = res.data.list;
    }
}


const handleCancel = ()=>{
   emit("cancel")
}

const handleOk = ()=>{
   formRef.value.validateFields().then(async(valid:boolean)=>{
       if(valid){
           let formData:any = _.cloneDeep(state.formData);
           formData.permissions = formData.permissions.map((permissionId:any)=>{
            return {permissionId}
           });
           let res 
           if(formData.id){
               res= await RoleService.updateRole(formData);
           }else{
               res= await RoleService.addRole(formData);
           }

           if(res.code===0){
               emit("ok")
           }
       }
   })
}

</script>
<style lang="less" scoped>
.json-attr-wrapper{
   display: flex;
}

.json-attr-container{
   width: 375px;
   height: 675px;
   overflow-y: auto;
   background-color: #e5e5e5;
}

.json-attr-container img{
   cursor: pointer;
}

.active-img{
   border: 2px solid #7546c9;
}
</style>